<%include pub/head.html%>
  </head>

  <body>
    <%include pub/nav.html%>

      <section id="home">
        <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="carousel-item active slides">
              <div class="overlay"></div>
              <div class="slide-1"></div>
              <div class="hero ">
                <hgroup class="wow fadeInUp">
                  <h1>让孩子 <span><a href="#" class="typewrite" data-period="2000"
                        data-type='[ "学习编程", "培养思维", "善于计算","独立思考"]'>
                        <span class="wrap"></span></a></span> </h1>
                  <h3>给孩子, 一个最好的未来</h3>
                </hgroup>
                <button class="btn btn-general btn-green wow fadeInUp" role="button">立即联系我们</button>
              </div>
            </div>
          </div>
        </div>
      </section>


      <section id="about" class="about">
        <div class="container">
          <div class="row title-bar">
            <div class="col-md-12">
              <h1 class="wow fadeInUp">少儿编程教育</h1>
              <div class="heading-border"></div>
              <p class="wow fadeInUp" data-wow-delay="0.4s">
                少儿编程教学主要采用“图形—代码—算法”的阶段式体系，前期的图形学习非常关键，如果过于难，对于缺乏耐心的儿童来说有可能很快就失去学习的兴趣，但如果过于简单，对于今后的学习帮助几乎为零，起不到少儿编程的真正价值。因此，对于少儿编程教育学习软件的选择上，往往需要注意以下几个明显特征：好玩、易上手、对未来学习有成长性帮助。
              </p>

            </div>
          </div>
        </div>
        <!-- About right side withBG parallax -->
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4 bg-starship">
              <div class="about-content-box wow fadeInUp" data-wow-delay="0.3s">
                <i class="fa fa-snowflake-o"></i>
                <h5>国际化教学方法</h5>
                <p class="desc">考美国CSTA标准研发，经NETS和教学实践双重验证，开发出适合中国青少年的编程课程体系，让孩子领跑未来。</p>
              </div>
            </div>
            <div class="col-md-4 bg-chathams">
              <div class="about-content-box wow fadeInUp" data-wow-delay="0.5s">
                <i class="fa fa-circle-o-notch"></i>
                <h5>趣味的游戏化教学</h5>
                <p class="desc">通过游戏化的教学方式，寓教于乐，打造适合孩子的轻松课堂，不再刻板枯燥，让孩子爱上编程。</p>
              </div>
            </div>
            <div class="col-md-4 bg-matisse">
              <div class="about-content-box wow fadeInUp" data-wow-delay="0.7s">
                <i class="fa fa-hourglass-o"></i>
                <h5>精英教师团队</h5>
                <p class="desc">北大、清华等名校及海归精英人才组成的师资团队，授课风格活泼生动，他们成为孩子的良师益友</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="comp-offer">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-3 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.2s">
              <h2>优秀师资力量</h2>
              <div class="heading-border-light"></div>
              <button class="btn btn-general btn-white" role="button">立即联系我们</button>
            </div>
            <div class="col-md-2 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.4s">
              <div class="desc-comp-offer-cont">
                <div class="thumbnail-blogs">
                  <img src="img/news/news-11.jpg" class="img-fluid">
                </div>
                <h3>陈嬷嬷</h3>
                <p class="desc">拥有丰富的一线编程教学和教研经验，精通Scratch和Arduino课程教学内容，竞赛实战经验丰富</p>
              </div>
            </div>
            <div class="col-md-2 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.6s">
              <div class="desc-comp-offer-cont">
                <div class="thumbnail-blogs">
                  <img src="img/news/news-13.jpg" class="img-fluid" alt="...">
                </div>
                <h3>陈嬷嬷</h3>
                <p class="desc">拥有丰富的一线编程教学和教研经验，精通Scratch和Arduino课程教学内容，竞赛实战经验丰富</p>
              </div>
            </div>
            <div class="col-md-2 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.8s">
              <div class="desc-comp-offer-cont">
                <div class="thumbnail-blogs">
                  <img src="img/news/news-14.jpg" class="img-fluid" alt="...">
                </div>
                <h3>陈嬷嬷</h3>
                <p class="desc">拥有丰富的一线编程教学和教研经验，精通Scratch和Arduino课程教学内容，竞赛实战经验丰富</p>
              </div>
            </div>
            <div class="col-md-2 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.8s">
              <div class="desc-comp-offer-cont">
                <div class="thumbnail-blogs">
                  <img src="img/news/news-14.jpg" class="img-fluid" alt="...">
                </div>
                <h3>陈嬷嬷</h3>
                <p class="desc">拥有丰富的一线编程教学和教研经验，精通Scratch和Arduino课程教学内容，竞赛实战经验丰富</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--====================================================
             WHAT WE DO
======================================================-->
      <section class="what-we-do bg-gradiant">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-3" style="text-align: center;">
              <h3>我们的6大优势</h3>
              <div class="heading-border-light" style="margin: 0 auto 20px"></div>
              <p class="desc">拥有丰富的一线编程教学和教研经验</p>
            </div>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-4  col-sm-6">
                  <div class="what-we-desc">
                    <i class="fa fa-briefcase"></i>
                    <h6>Workspace</h6>
                    <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
                  </div>
                </div>
                <div class="col-md-4  col-sm-6">
                  <div class="what-we-desc">
                    <i class="fa fa-shopping-bag"></i>
                    <h6>Storefront</h6>
                    <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
                  </div>
                </div>
                <div class="col-md-4  col-sm-6">
                  <div class="what-we-desc">
                    <i class="fa fa-building-o"></i>
                    <h6>Apartments</h6>
                    <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
                  </div>
                </div>
                <div class="col-md-4  col-sm-6">
                  <div class="what-we-desc">
                    <i class="fa fa-bed"></i>
                    <h6>Hotels</h6>
                    <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
                  </div>
                </div>
                <div class="col-md-4  col-sm-6">
                  <div class="what-we-desc">
                    <i class="fa fa-hourglass-2"></i>
                    <h6>Concept</h6>
                    <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
                  </div>
                </div>
                <div class="col-md-4  col-sm-6">
                  <div class="what-we-desc">
                    <i class="fa fa-cutlery"></i>
                    <h6>Restaurant</h6>
                    <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--====================================================
              STORY
======================================================-->
      <section id="story">
        <div class="container">
          <div class="row title-bar" style="padding-bottom: 0">
            <div class="col-md-12">
              <h1 class="wow fadeInUp">优秀作品展示</h1>
              <div class="heading-border"></div>
              <div class="container">
                <div class="row">
                  <% for(let i=0;i < keeplist.length; i++){%>
                    <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="0.1s">
                      <div class="story-descb">
                        <a href="/works/content/1/<%- keeplist[i]._id %>"><img
                            src="/released/covers/<%- keeplist[i].covers%>" class="img-fluid"
                            alt="<%- keeplist[i].title %>"></a>
                        <h6><a href="/works/content/1/<%- keeplist[i]._id %>">
                            <%- keeplist[i].title %>
                          </a></h6>
                        <p>作品简介：<%- keeplist[i].abstract%>
                        </p>
                        <a href="/works/content/1/<%- keeplist[i]._id %>"><i class="fa fa-arrow-circle-o-right"></i>
                          点击查看</a>
                      </div>
                    </div>
                    <%}%>
                </div>
              </div>
              <div style="text-align: center;"><a href="">查看更多作品 <i class="fa fa-arrow-circle-o-right"></i></a></div>
            </div>
          </div>
        </div>

      </section>

      <!--====================================================
          COMPANY THOUGHT
======================================================-->
      <div class="overlay-thought"></div>
      <section id="thought" class="bg-parallax thought-bg">
        <div class="container">
          <div id="thought-desc" class="row title-bar title-bar-thought owl-carousel owl-theme">
            <div class="col-md-12 ">
              <h6>客户好评</h6>
              <div class="heading-border bg-white"></div>
              <p class="wow fadeInUp" data-wow-delay="0.4s">Businessbox will deliver value to all the stakeholders and
                will attain excellence and leadership through such delivery of value. We will strive to support the
                stakeholders in all activities related to us. Businessbox provide great things.</p>
              <h6>John doe</h6>
            </div>
            <div class="col-md-12 thought-desc">
              <h6>好评如潮</h6>
              <div class="heading-border bg-white"></div>
              <p class="wow fadeInUp" data-wow-delay="0.4s">Ensuring quality in Businessbox is an obsession and the high
                quality standards set by us are achieved through a rigorous quality assurance process. Quality assurance
                is performed by an independent team of trained experts for each project. </p>
              <h6>Tom John</h6>
            </div>
          </div>
        </div>
      </section>


      <!--====================================================
              CLIENT
======================================================-->
      <section id="client" class="client">
        <div class="container">
          <div class="row title-bar">
            <div class="col-md-12">
              <h1 class="wow fadeInUp">创始人语录</h1>
              <div class="heading-border"></div>
              <p class="wow fadeInUp" data-wow-delay="0.4s">We committed to helping you maintain your Brand Value.</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 col-sm-12">
              <div class="client-cont wow fadeInUp" data-wow-delay="0.1s">
                <img src="img/client/avatar-6.jpg" class="img-fluid" alt="">
                <h5>Leesa len</h5>
                <h6>DSS CEO & Cofounder</h6>
                <i class="fa fa-quote-left"></i>
                <p>The Businessbox service - it helps fill our Business, and increase our show up rate every single
                  time.</p>
              </div>
            </div>
            <div class="col-md-6 col-sm-12">
              <div class="client-cont wow fadeInUp" data-wow-delay="0.3s">
                <img src="img/client/avatar-2.jpg" class="img-fluid" alt="">
                <h5>Dec Bol</h5>
                <h6>TEMS founder</h6>
                <i class="fa fa-quote-left"></i>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!--====================================================
            CONTACT HOME
======================================================-->
      <div class="overlay-contact-h"></div>
      <section id="contact-h" class="bg-parallax contact-h-bg">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <div class="contact-h-cont">
                <h3 class="cl-white">领取免费体验名额</h3><br>
                <form>
                  <div class="form-group cl-white">
                    <label>您孩子的姓名</label>
                    <input type="text" class="form-control" id="foot-username" placeholder="您孩子的姓名">
                  </div>
                  <div class="form-group cl-white">
                    <label>您的联系电话</label>
                    <input type="text" class="form-control" id="foot-phone" placeholder="您的联系电话">
                  </div>
                  <div class="form-group cl-white">
                    <label>您孩子的年级</label>
                    <input type="text" class="form-control" id="foot-age" placeholder="您孩子的年级">
                  </div>
                  <button class="btn btn-general btn-white" id="footer-upload"><i fa fa-right-arrow></i> 立即领取</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>

      <%include pub/foot.html%>
        <%include pub/script.html%>
  </body>

  </html>